<template>
  <div class="j-depart-tree-select-wrapper" ref="departTreeSelectWrapper">
    <j-tree-select
      :value="value"
      :placeholder="placeholder"
      :disabled="disabled"
      :multiple="multiple"
      :popupContainer="getPopupContainer"
      dict="sys_depart,depart_name,id"
      pidField="parent_id"
      hasChildField="has_child"
      @change="handleChange"
    />
  </div>
</template>

<script>
import JTreeSelect from '@/components/jeecg/JTreeSelect'

export default {
  name: 'JDepartTreeSelect',
  components: {
    JTreeSelect
  },
  props: {
    value: {
      type: String,
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择部门',
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    multiple: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  methods: {
    // 获取当前组件容器作为下拉框的父容器
    getPopupContainer() {
      return this.$refs.departTreeSelectWrapper
    },
    handleChange(value, label) {
      this.$emit('change', value, label)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="less" scoped>
.j-depart-tree-select-wrapper {
  position: relative;
  width: 100%;
  
  /deep/ .ant-select-dropdown {
    max-height: 300px;
    overflow-y: auto;
  }
  
  /deep/ .ant-select-selection {
    border-radius: 4px;
    
    &:hover {
      border-color: #40a9ff;
    }
    
    &:focus, &:active {
      border-color: #40a9ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
}
</style> 